<template>
  <div class="createPost-container">
    <el-form class="form-container" :model="postForm" :rules="rules" ref="postForm">

      <Sticky :className="'sub-navbar '+postForm.status">
        <template v-if="fetchSuccess">
          <div style="display:inline-block">

            <el-dropdown trigger="click">
              <router-link style="margin-right:15px;" v-show='isEdit' :to="{ path:'create'}">
                <el-button type="info">新增资产</el-button>
              </router-link>
            </el-dropdown>
          </div>

          <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm()">保存
          </el-button>
          <el-button v-loading="loading" type="warning" @click="cancel()">取消</el-button>

        </template>
        <template v-else>
          <el-tag>发送异常错误,刷新页面,或者联系程序员</el-tag>
        </template>

      </Sticky>

      <div class="createPost-main-container">
        <el-row>
          <el-col :span="21">
            <el-form-item style="margin-bottom: 40px;" prop="AsName">
              <MDinput name="name" v-model="postForm.AsName" required :maxlength="100">
                资产名称
              </MDinput>
            </el-form-item>

            <div class="postInfo-container">
              <el-row>
                <el-col :span="8">
                  <el-tooltip class="item" effect="dark" content="编码必须是唯一的。如果不输入编码，系统将按照您的设置自动生成编码" placement="top">
                    <el-form-item label-width="80px" label="资产编码" required prop="AsCode">
                      <el-input placeholder="资产条码" v-model="postForm.AsCode"  >
                      </el-input>
                    </el-form-item>
                  </el-tooltip>
                </el-col>

                <el-col :span="8">
                    <el-form-item label-width="80px" label="资产类别" required prop="TypeId">
                      <el-select  placeholder="请选择资产类别" v-model="postForm.TypeId" >
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label-width="80px" label="所属公司" required prop="AsBelongComp">
                      <el-select  placeholder="请选择所属公司" v-model="postForm.AsBelongComp" >
                        <el-option label="深圳卷皮网络科技有限公司" value="SZ"></el-option>
                        <el-option label="武汉奇米网络科技有限公司" value="WH"></el-option>
                        <el-option label="湖北三当家供应链管理有限公司" value="SDJ"></el-option>
                      </el-select>
                    </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label-width="80px" label="SN号" >
                    <el-input placeholder="SN号" v-model="postForm.AsSn"  >
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label-width="80px" label="区域" >
                    <el-select  placeholder="请选择存放区域" v-model="postForm.AsArea" >
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label-width="80px" label="采购时间" required  prop="AsBuyTime">
                    <el-date-picker  v-model="postForm.AsBuyTime" type="date" format="yyyy-MM-dd" placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label-width="80px" label="计量单位" >
                    <el-input placeholder="计量单位"  v-model="postForm.AsUnit"   >
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label-width="80px" label="采购单价" >
                    <el-input placeholder="采购单价" v-model="postForm.AsAmount"   >
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label-width="80px" label="原值" >
                    <el-input placeholder="原值" v-model="postForm.AsOriginal"   >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label-width="80px" label="资产品牌" >
                    <el-input placeholder="资产品牌" v-model="postForm.AsBrand"   >
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label-width="80px" label="规格型号" >
                    <el-input placeholder="规格型号" v-model="postForm.AsSpec"   >
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label-width="80px" label="资产配置" >
                    <el-input placeholder="资产配置" v-model="postForm.AsAllocation"   >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label-width="80px" label="使用公司" >
                    <el-select  placeholder="请选择使用公司" v-model="postForm.AsUsedComp"  >
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label-width="80px" label="使用部门" >
                    <el-select  placeholder="请选择使用部门" v-model="postForm.AsUsedDep"  >
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label-width="80px" label="使用人" >
                    <multiselect  v-model="postForm.AsUsedPerson" :options="userLIstOptions" @search-change="" placeholder="搜索用户" selectLabel="选择"
                                 deselectLabel="删除" track-by="key" :internalSearch="false" label="key">
                      <span slot='noResult'>无结果</span>
                    </multiselect>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label-width="80px" v-model="postForm.AsSupplier"  label="供应商" >
                    <el-input placeholder="供应商"  >
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label-width="80px" v-model="postForm.AsLocation"  label="存放地点" >
                    <el-input placeholder="存放地点"  >
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label-width="80px" label="来源" >
                    <el-select  placeholder="请选择来源" v-model="postForm.AsFrom"  >
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label-width="80px" label="使用期限(月)" >
                    <el-input placeholder="供应商" v-model="postForm.AsTimeLimit"   >
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label-width="80px" label="管理员" >
                    <el-select  placeholder="请选择管理员" v-model="postForm.AsManager"  >
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>

        <el-form-item style="margin-bottom: 40px;" label-width="45px" label="备注:">
          <el-input type="textarea" class="article-textarea" :rows="1" autosize placeholder="请输入内容" v-model="postForm.AsRemart">
          </el-input>
          <span class="word-counter" v-show="contentShortLength">{{contentShortLength}}字</span>
        </el-form-item>

        <div style="margin-bottom: 20px;">
          <Upload v-model="postForm.AsPic"></Upload>
        </div>
      </div>
    </el-form>

  </div>
</template>

<script>
  import Tinymce from 'components/Tinymce'
  import Upload from 'components/Upload/singleImage3'
  import MDinput from 'components/MDinput';
  import { postAsset } from 'api/am_list';
  import { checkAsCode } from 'api/am_list';
  import { userSearch } from 'api/remoteSearch';

  export default {
    name: 'amListForm',
    components: { Tinymce, MDinput, Upload },
    data() {
      const asNameValidate = (rule, value, callback) => {
        if (value === '') {
          this.$message({
            message: '资产名称为必填项',
            type: 'error'
          });
          return callback(new Error('资产名称不能为空'));
        } else {
          callback()
        }
      };
      const typeIdValidate = (rule, value, callback) => {
        if (value === undefined) {
          this.$message({
            message: '资产类别为必选项',
            type: 'error'
          });
          return callback(new Error('资产类别不能为空'));
        } else {
          callback()
        }
      };
      const asBelongCompValidate = (rule, value, callback) => {
        if (value === '') {
          this.$message({
            message: '所属公司为必选项',
            type: 'error'
          });
          return callback(new Error('所属公司不能为空'));
        } else {
          callback()
        }
      };
      const asBuyTimeValidate = (rule, value, callback) => {
        if (value === undefined || value === '') {
          this.$message({
            message: '采购时间为必填项',
            type: 'error'
          });
          return callback(new Error('采购时间不能为空'));
        } else {
          callback()
        }
      };
      const asCodeValidate = (rule, value, callback) => {
        if (value === '') {
          this.$message({
            message: '资产编码为必需项',
            type: 'error'
          });
          return callback(new Error('资产编码不能为空'));
        } else {
          checkAsCode(value).then(response => {
            if (response.data !== 'OK') {
            this.$message({
              message: response.data,
              type: 'error'
            });
            return callback(new Error(response.data));
          } else {
            callback()
          }
        })
        }
      };
      return {
        postForm: {
          AsName: '', // 资产名称
          TypeId: undefined, // 资产类别
          AsCode: '', // 资产编号
          AsSn: '', // SN号
          AsBrand: '', // 资产品牌
          AsSpec: '', // 规格型号
          AsAllocation: '', //资产配置
          AsUnit: '', //计量单位
          AsAmount: '', // 采购金额
          AsOriginal: '', // 资产原值
          AsBelongComp: '', // 所属公司
          AsUsedComp: '', // 使用公司
          AsUsedDep: '', // 使用部门
          AsUsedPerson: '', // 使用人
          AsManager: '', // 管理员
          AsFrom: '', //来源
          AsArea: '', //区域
          AsLocation: '', //存放地点
          AsSupplier: '', //供应商
          AsRemart: '', //资产备注
          AsPic: '', //资产照片
          AsBuyTime: undefined, //采购时间
          AsTimeLimit: undefined, //使用期限
        },
        fetchSuccess: true,
        loading: false,
        userLIstOptions: [],
        rules: {
          AsName: [{ validator: asNameValidate }],
          AsCode: [{ trigger:'blur',validator: asCodeValidate }],
          TypeId: [{ validator: typeIdValidate }],
          AsBelongComp: [{ validator: asBelongCompValidate }],
          AsBuyTime: [{ validator: asBuyTimeValidate }],
        }
      }
    },
    computed: {
      contentShortLength() {
        return this.postForm.AsRemart.length
      },
      isEdit() {
        return this.$route.meta.isEdit // 根据meta判断
      }
    },
    created() {
      if (this.isEdit) {
        this.fetchData();
      }
    },
    methods: {
      fetchData() {
        getArticle().then(response => {
          this.postForm = response.data;
        }).catch(err => {
          this.fetchSuccess = false;
          console.log(err);
        });
      },
      submitForm() {
        this.postForm.display_time = parseInt(this.display_time / 1000);
        this.$refs.postForm.validate(valid => {
          if (valid) {
            this.postForm.TypeId = parseInt(this.postForm.TypeId);
            postAsset(this.postForm).then(response => {
              if (response.data === 'OK') {
                this.$notify({
                  title: '成功',
                  message: '新增资产成功',
                  type: 'success',
                  duration: 2000
                });
                  this.$router.push({path:'/am/list'});
              } else {
                this.$notify({
                  title: '失败',
                  message: response.data,
                  type: 'error',
                  duration: 2000
                });
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      cancel() {
        this.$router.go(-1);
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";
  .title-prompt{
    position: absolute;
    right: 0px;
    font-size: 12px;
    top:10px;
    color:#ff4949;
  }
  .createPost-container {
    position: relative;
    .createPost-main-container {
      padding: 40px 45px 20px 50px;
      .postInfo-container {
        position: relative;
        @include clearfix;
        margin-bottom: 10px;
        .postInfo-container-item {
          float: left;
        }
      }
      .editor-container {
        min-height: 500px;
        margin: 0 0 30px;
        .editor-upload-btn-container {
            text-align: right;
            margin-right: 10px;
            .editor-upload-btn {
                display: inline-block;
            }
        }
      }
    }
    .word-counter {
      width: 40px;
      position: absolute;
      right: -10px;
      top: 0px;
    }
  }
</style>

